<template>
  <div>
    <el-row :gutter="20" :class="$style.header">
      <el-col :span="6">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">用户ID：</span>
        <el-input v-model="id" placeholder="请输入用户id" style="width:71%" @keyup.enter.native="handleSearch"></el-input>
      </el-col>
      <el-col :span="6">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">起始时间：</span>
        <el-date-picker v-model="terms.timeDur" type="daterange" placeholder="选择日期范围">
        </el-date-picker>
      </el-col>
      <!-- <el-col :span="4">
        <el-select clearable v-model="terms.cbTerm.selValue" placeholder="财币类型">
          <el-option v-for="item in terms.cbTerm.opts" :key="item.cCategoryNumber" :label="item.cCategoryDescription" :value="item.cCategoryNumber">
          </el-option>
        </el-select>
      </el-col> -->
      <el-col :span="6">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">奖扣：</span>
        <el-select clearable v-model="terms.rewardTerm.selValue" placeholder="奖扣">
          <el-option v-for="item in terms.rewardTerm.opts" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="handleSearch" style="width:25%;">搜索</el-button>
      </el-col>
    </el-row>
    <el-table :data="capital" border style="width: 100%">
      <el-table-column prop="cU_ser" label="用户名" min-width="100">
      </el-table-column>
      <el-table-column prop="fUid" label="用户ID" min-width="100">
      </el-table-column>
      <el-table-column prop="cBdsm" label="积分变更说明" min-width="100">
      </el-table-column>
      <el-table-column prop="fJclx" label="类型" min-width="100">
        <template slot-scope="scope">
          <span v-html="scope.row.fJclx"></span>
        </template>
      </el-table-column>
      <el-table-column prop="fBdjf" label="变更积分" min-width="100">
      </el-table-column>
      <el-table-column prop="tDate" label="变更时间" min-width="100">
      </el-table-column>
    </el-table>
    <div style="margin: 30px 0;">
      <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { dateFormat } from 'vux'
export default {
  data() {
    return {
      id: this.$route.params.id,
      terms: {
        uname: '',
        timeDur: '',
        cbTerm: {      // 财币选项
          selValue: '',
          opts: [
          ]
        },
        rewardTerm: {
          selValue: '',
          opts: [
            {
              value: 1,
              label: '奖励'
            },
            {
              value: 2,
              label: '扣除'
            }
          ]
        }
      },
      capitalTit: [
        {
          prop: 'cU_ser',
          label: '用户名',
          width: '100'
        },
        {
          prop: 'fUid',
          label: '用户ID',
          width: '100'
        },
        {
          prop: 'cBdsm',
          label: '积分变更说明',
          width: '100'
        },
        {
          prop: 'fJclx',
          label: '类型',
          width: '100'
        },
        {
          prop: 'fBdjf',
          label: '变更积分',
          width: '100'
        },
        {
          prop: 'tDate',
          label: '变更时间',
          width: '100'
        }
      ],
      capital: [],
      total: 0,
      pageSize: 20,
    }
  },
  methods: {
    handleSearch(){
      this.getTableData(1)
    },
    handleCurrentChange(val) {
      this.getTableData(val)
    },
    getTableData(page = 1) {
      this.$get(this, {
        api: 'member/loadjfjl.do', data: {
          fuid: this.id,
          cCategoryNumber: this.terms.cbTerm.selValue,
          fJclx: this.terms.rewardTerm.selValue,
          st: this.terms.timeDur && dateFormat(this.terms.timeDur[0], 'YYYY-MM-DD'),
          et: this.terms.timeDur && dateFormat(this.terms.timeDur[1], 'YYYY-MM-DD'),
          pageSize: this.pageSize,
          page
        }
      }).then(({ data }) => {
        if (data.state === 0) {
          this.total = data.content.num;
          this.capital = data.content.data;
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    getType () {
      this.$get(this, {
        api: 'member/loadjfjlType.do', data: {
        }
      }).then(({ data }) => {
        if (data.state === 0) {
          this.terms.cbTerm.opts = data.content
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    }
  },
  mounted() {
    this.getTableData(1);
    this.getType();
  }
}
</script>

<style lang="scss" module>
.header {
  font-size: 14px;
  padding-bottom: 20px;
}
</style>


